<div class="widgets">
    <div class="row">
        <div class="col-md-12">
            <div ba-panel ba-panel-title="Smart Table With Filtering, Sorting And Pagination"
                 ba-panel-class="with-scroll">
                <div class="horizontal-scroll">
                    <div class="form-group select-page-size-wrap ">
                        <label>Rows on page
                            <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
                                    ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]">
                            </select>
                        </label>
                    </div>
                    <table class="table" st-table="smartTableData">
                        <thead>
                        <tr class="sortable ">
                            <th class="table-id" st-sort="id" st-sort-default="true">#</th>
                            <th st-sort="firstName">First Name</th>
                            <th st-sort="lastName">Last Name</th>
                            <th st-sort="username">Username</th>
                            <th st-sort="email">Email</th>
                            <th st-sort="age">Age</th>
                            <th>Actions</th>
                        </tr>
                        <tr>
                            <th></th>
                            <th><input st-search="firstName" placeholder="Search First Name"
                                       class="input-sm form-control search-input"
                                       type="search"/></th>
                            <th><input st-search="lastName" placeholder="Search Last Name"
                                       class="input-sm form-control search-input"
                                       type="search"/></th>
                            <th><input st-search="username" placeholder="Search Username"
                                       class="input-sm form-control search-input"
                                       type="search"/></th>
                            <th><input st-search="email" placeholder="Search Email"
                                       class="input-sm form-control search-input"
                                       type="search"/>
                            </th>
                            <th><input st-search="age" placeholder="Search Age"
                                       class="input-sm form-control search-input"
                                       type="search"/>
                            </th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in smartTableData">
                            <td class="table-id">{{item.id}}</td>
                            <td><span editable-text="item.firstName" e-name="firstName" e-form="rowform" e-required>{{item.firstName|| 'empty' }}</span></td>
                            <td><span editable-text="item.lastName" e-name="lastName" e-form="rowform" e-required>{{item.lastName|| 'empty' }}</span></td>
                            <td><span editable-text="item.username" e-name="username" e-form="rowform" e-required>{{item.username|| 'empty' }}</span></td>
                            <td><span editable-email="item.email" e-name="email" e-form="rowform" e-required><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></span></td>
                            <td><span editable-number="item.age" e-name="age" e-form="rowform" e-min="18" e-required>{{item.age|| 'empty'}}</span></td>
                            <td>
                                <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline"
                                      shown="inserted == item">
                                    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary editable-table-button btn-xs">
                                        Save
                                    </button>
                                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default editable-table-button btn-xs">
                                        Cancel
                                    </button>
                                </form>
                                <div class="buttons" ng-show="!rowform.$visible">
                                    <button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button>
                                    <button class="btn btn-danger editable-table-button btn-xs" ng-click="removeUser($index)">Delete</button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="6" class="text-center">
                                <div st-pagination="" st-items-by-page="smartTablePageSize"
                                     st-displayed-pages="5"></div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
